<template>
  <view class="content">
    <view class="topchoose" v-if="dataList.length">
      <view>
        <u-checkbox v-show="isshowchose" @change="onAllSel" v-model="allchecked" :checked="allchecked" :disabled="false" shape="circle" class="chooseall">
          全选
          <text
              class="chooseed" v-if="totalCount>0">（已选择{{ totalCount }}条议题）</text>
        </u-checkbox>
      </view>
      <view class="choosetopics" @click="isshowchose=!isshowchose">{{isshowchose?'取消':'选择议题'}}</view>
    </view>
    <view class="list" v-if="dataList.length">
      <view  class="list-item" v-for="(v,i) in dataList" :key="i">

        <u-checkbox v-if="isshowchose"  class="chooseOne" v-model="v.ischecked" :checked="v.ischecked" :topicsid="v.id" @change="choosetopics($event,v,i)" :disabled="false" shape="circle"></u-checkbox>
        <view class="user u-flex">
          <u--image :src="v.avatar" shape="circle" width="44rpx" height="44rpx">
          </u--image>
          <text>{{v.nickname}}</text>
          <!-- 添加同意通过，修改的状态时，时发起人可以编辑 -->
          <!-- <u-icon name="edit-pen" class="editbutton" @click="toDetail(item.id)"></u-icon> -->
        </view>
        <view  class="item-content">
          <view class="u-flex is-top">
            <view class="u-flex-item">上传于：{{getDate(v.createtime)}}</view>
<!--            <view class="u-flex-item" @click="is_top_click(item,index)" v-if="item.is_faqi_ren">{{item.is_top?'取消置顶':'设为置顶'}}</view>-->
          </view>
          <view class="title">
            {{v.content}}
          </view>
          <view class="images">
            <view class="iamges-item u-flex" v-for="(zitem,zindex) in v.files" :key="zindex">
              <!-- <view class="new-tip">
                更新
              </view> -->
              <!-- <u--image v-if="zitem.is_img == 1" :src="zitem.fullurl" radius="16rpx" width="136rpx" height="136rpx">
              </u--image> -->

              <!-- <view v-if="zitem.is_img == 0" class="file-box u-flex" @click.stop="handleDownload(zitem)">
                <u-icon name="attach" color="#4871C0" size="24"></u-icon>
                <text class="file-text">{{zitem.filename}}</text>
              </view> -->
              <view class="file-box u-flex" @click.stop="handleDownload(zitem)">
                <u-icon name="attach" color="#4871C0" size="24"></u-icon>
                <text class="file-text">{{zitem.filename}}</text>
              </view>
            </view>
          </view>
          <!-- <view class="file-box u-flex" @click.stop="handleDownload(item.files)">
            <u-icon name="attach" color="#4871C0" size="24"></u-icon>
            <text class="file-text">{{item.files.filename}}</text>
          </view> -->
<!--          <view class="step-box">-->
<!--            <u-steps current="1" direction="column">-->
<!--              <view class="" v-for="(sitem,sindex) in v.check" :key="sindex">-->
<!--                <u-steps-item :title="sitem.check_text" :desc="sitem.createtime_text"-->
<!--                              :contents="sitem.content">-->
<!--                  <text v-if="sitem.status == 1" class="slot-icon" slot="icon">-->
<!--                    <u-icon name="checkmark-circle" color="#4871C0" size="20"></u-icon>-->
<!--                  </text>-->
<!--                  <text v-if="sitem.status == 0" class="slot-icon" slot="icon">-->
<!--                    <u-icon name="close-circle" color="#FF7A00" size="20"></u-icon>-->
<!--                  </text>-->
<!--                </u-steps-item>-->
<!--                &lt;!&ndash;              <view class="reject">&ndash;&gt;-->
<!--                &lt;!&ndash;                {{sitem.content}}&ndash;&gt;-->
<!--                &lt;!&ndash;              </view>&ndash;&gt;-->
<!--              </view>-->
<!--            </u-steps>-->
<!--          </view>-->
<!--          <view class="buttons u-flex" v-if="item.is_check == 1 && item.is_show == 1">-->
<!--            <view class="button-box button1" @click="rejectTopicFun(item.id)">-->
<!--              驳回-->
<!--            </view>-->
<!--            <view class="button-box button2" @click="adoptTopicFun(item.id)">-->
<!--              通过-->
<!--            </view>-->
<!--          </view>-->
        </view>
      </view>
    </view>
    <view class="button" @click="upTopicsHeader()" v-if="isshowchose">
      推送校长审核
    </view>
    <!-- 加载更多 -->
    <!-- <u-loadmore v-if="dataList.length" :status="loadStatus" /> -->

    <u-empty v-if="!dataList.length && !isLoading" mode="data" icon="http://cdn.uviewui.com/uview/empty/car.png">
    </u-empty>

    <!-- 驳回弹窗 -->
    <u-modal :show="show" @confirm="confirm" @cancel="cancel" ref="uModal" title="驳回理由" confirmText="确定"
             :showCancelButton="true">
      <view class="slot-content reason-content">
        <u--textarea v-model="reason" height="100" placeholder="请驳回理由~" border="surround" confirmType="done">
        </u--textarea>
      </view>
    </u-modal>
  </view>
</template>

<script>
import {
  getTopicList,
  meetnewLists,
  meetnewShoujiLists,
  testlogin,
  prTopics,
  operationTopic,
  operationTopic2,
  topicsetTop
} from '@/api/meetApi.js'
export default {
  data() {
    return {
      id: '',
      // page: 1,
      // limit: 12,
      // lastPage: 0,
      isLoading:false,
      loadStatus: '',
      dataList: [],
      show: false,
      reason: '',
      chooseId: '',
      allchecked:false,
      isshowchose:false,
    }
  },
  computed:{
    totalCount(){
      let params = [];
      this.dataList.forEach((item)=>{
        if(item.ischecked){
          params.push(item.id)
        }
      })
      return params.length
    }
  },
  onShow() {
    console.log("-----------11返回来", )
    this.id = this.$route.query.id;
    this.dataList = [];
    // this.page = 1;
    // this.linshidenglu();
    this.getData();
  },
  onReachBottom: function() {
    // if (this.page < this.lastPage) {
    //   this.page += 1;
    //   this.getData();
    // }
  },
  onHide() {},
  onLoad(options) {
    // this.id = options.id;
    // this.getData();
  },
  methods: {
    getDate(timestamp) {
      var date = new Date(timestamp * 1000)
      let year = date.getFullYear();
      let month = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1);
      let day = date.getDate();
      let h = date.getHours()
      let m = date.getMinutes();
      month = month > 9 ? month : '0' + month;;
      day = day > 9 ? day : '0' + day;
      return `${year}-${month}-${day} ${h}:${m}`;
    },
    onAllSel() {
      let that = this;
      console.log("=====that.dataList",that.dataList)
      that.allchecked = !that.allchecked;
      that.dataList.map((item,index)=>{
        item.ischecked =  that.allchecked
      })
      console.log("=====that.dataList",that.dataList)
    },
    choosetopics(e,item,index){
      console.log("======item",item)
      item.ischecked = !item.ischecked
      this.$set(this.dataList,index,item)
      this.allchecked = this.dataList.every((item)=>{
        return item.ischecked == true
      })
    },
    linshidenglu(){
      testlogin(39).then(res => {
        if (res.code == 1) {
          uni.setStorageSync('token',res.data.token)
          this.getData();
        }
      })
    },
    upTopicsHeader(){
      var that = this;
      let params = {ids:[]};
      this.dataList.forEach((item)=>{
        if(item.ischecked){
          params.ids.push(item.id)
        }
      })
      prTopics(params).then(res => {
        if (res.code == 1) {
          uni.showToast({
            title: '推送成功',
            icon: "none",
            duration: 1000
          });
          that.allchecked = false;
          that.isshowchose = false;
          that.dataList = [];
          that.getData();
        }
      })
    },
    toDetail(id) {
      uni.navigateTo({
        url: '/pages/tabbar-1-detial/uploadTopics/editTopics?id=' + id
      });
    },
    // 获取数据
    getData() {
      this.loadStatus = 'loading';
      this.isLoading = true;
      let params = {
        // page: this.page,
        // check_type: 'vote',
        // status: 1,
        // limit: this.limit,
        meet_id: this.id
      };
      meetnewShoujiLists(params).then(res => {
        if (res.code == 1) {
          this.isLoading = false;
          // uni.stopPullDownRefresh();
          // this.lastPage = res.data.last_page
          // this.loadStatus = this.page < res.data.last_page ? 'loadmore' : 'nomore';
          this.dataList = res.data
          this.dataList.map((item)=>{
            item.ischecked = false
          })
        } else {
          uni.showToast({
            title: res.msg,
            icon: "none",
            duration: 3500
          });
        }

      })
    },
    is_top_click(item,index){
      topicsetTop({is_top:!item.is_top,id:item.id}).then(res => {
        if(res.code===1){
          uni.showToast({
            title: res.msg,
            icon: "none",
            duration: 3500
          });
          this.getData();
        }else{
          uni.showToast({
            title: res.msg,
            icon: "none",
            duration: 2000
          });
        }

      })

    },
    // 点击附件预览
    handleDownload(item) {
      console.log("=====item", item)
      let params = {
        url: item.fullurl, // 需要预览文件的地址(必填，可以使用相对路径)
        name: item.filename, // 需要预览文件的文件名(不填的话取url的最后部分)
        size: item.filesize, // 需要预览文件的字节大小(必填)
        type: item.mimetype
      }
      this.$store.dispatch('yulan', params)
    },
    // 取消
    cancel() {
      this.show = false;
      reason: ''
    },
    // 驳回
    rejectTopicFun(id) {
      this.show = true;
      this.chooseId = id;
    },
    // 驳回
    confirm() {
      this.isLoading = true;
      let params = {
        topic_id: this.chooseId,
        status: 0,
        content: this.reason
      };
      operationTopic(params).then(res => {
        this.isLoading = false;
        console.log(res)
        this.show = false;
        uni.showToast({
          title: res.msg,
          icon: 'none',
          duration: 2000
        });
        this.dataList = []
        this.getData()
      })
    },
    // 通过
    adoptTopicFun(id) {
      this.isLoading = true;
      let params = {
        topic_id: id,
        status: 1,
      };
      operationTopic(params).then(res => {
        this.isLoading = false;
        uni.showToast({
          title: res.msg,
          icon: 'none',
          duration: 1000
        });
        this.dataList = []
        this.getData()
      })

    }
  }
}
</script>

<style>
.content {
  background-color: #F8F8F8;
  min-height: 100vh;
}
.topchoose{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding:20rpx 30rpx 0;
}
.choosetopics{
  font-size: 24rpx;
}
.chooseed{
  font-size: 24rpx;
  margin-left: 10rpx;
  color: #ccc;
}
.u-flex {
  display: flex;
  align-items: center;
}
.item-content{
  margin-top: 20rpx;
  border-top: 1px solid #f3f3f3;
}
.is-top{
  justify-content: space-between;
}
.u-flex-item{
  color:#999999;
  font-size: 24rpx;
  line-height: 100rpx;
}
.list {
  padding: 20rpx 30rpx;
}

.list-item {
  background: #FFFFFF;
  border-radius: 16rpx;
  opacity: 1;
  padding: 30rpx;
  margin-bottom: 20rpx;
  position: relative;
}
.chooseOne{
  position: absolute;
  right: 20rpx;
  top: 30rpx;
  z-index: 200;
}

.user {
  position: relative;
  width: 100%;
}

.user text {
  font-size: 28rpx;
  font-weight: bold;
  color: #333333;
  margin-left: 10rpx;
}

.user .editbutton {
  position: absolute;
  right: 0;
}

.title {
  margin-top: 20rpx;
  font-size: 28rpx;
  font-weight: 500;
  color: #333333;
  line-height: 52rpx;
}
.title-mask{
  background-color: #4871C0;
  font-size: 20rpx;
  padding: 0 4rpx;
  color: #FFFFFF;
  margin-right: 6rpx;
  vertical-align: top;
}
.images {
  margin-top: 20rpx;
  margin-bottom: 10rpx;
}

.iamges-item {
  margin-right: 40rpx;
  position: relative;
}

.file-box {
  position: relative;
  margin: 20rpx 0;
  padding: 20rpx;
  background: #F8F9FC;
  border-radius: 16rpx;
  opacity: 1;
  font-size: 28rpx;
  font-weight: 500;
  color: #4871C0;

}

.file-text {
  display: inline-block;
  word-break: break-all
}

/deep/.u-text__value--main,
/deep/ .u-text__value--content {
  font-size: 14px !important;
  color: #303133 !important;
}

.button-box {
  width: 128rpx;
  height: 64rpx;
  line-height: 64rpx;
  text-align: center;
  border-radius: 16rpx;
  opacity: 1;
  font-size: 28rpx;
  font-weight: 500;
  margin-top: 20rpx;
}

.button1 {
  color: #4871C0;
  border: 1px solid #4871C0;
  margin-left: auto;
}

.button2 {
  color: #FFFFFF;
  background: #4871C0;
  margin-left: 20rpx;
}

.new-tip {
  position: absolute;
  top: 0;
  right: 0;
  width: 56rpx;
  height: 32rpx;
  line-height: 32rpx;
  background: #FF7A00;
  border-radius: 0px 16rpx 0px 10rpx;
  opacity: 1;
  font-size: 18rpx;
  color: #fff;
  z-index: 22;
  text-align: center;
}

.reject {
  padding-left: 126rpx;
  font-size: 28rpx;
  font-weight: 500;
  color: #666666;
  line-height: 52rpx;
}

.reason-content {
  width: 100%;
  border-radius: 8rpx;
  opacity: 1;
}

/deep/ .u-modal__content {
  text-align: center !important;
}

/deep/.u-textarea {
  background: #F8F8F8;
  border-radius: 8rpx;
  opacity: 1;
  text-align: left;
}

/deep/.uni-textarea-placeholder {
  text-align: left;
  font-size: 28rpx;
  font-weight: 500;
  color: #999999;
}

/deep/.u-text__value--tips {
  color: #606266 !important;
}

/deep/.u-steps-items {
  flex-direction: row !important;
  width: 100%;

}

/deep/ .u-steps-item__content {
  width: 100%;
}

/deep/ .u-steps-item__content .u-text {
  width: 100%;
}

.button {
  background: #4871C0;
  border-radius: 8rpx;
  opacity: 1;
  font-size: 28rpx;
  font-weight: 500;
  color: #FFFFFF;
  text-align: center;
  padding: 30rpx 0;
  position: fixed;
  width: calc(100% - 60rpx);
  bottom: 10rpx;
  left: 30rpx;
}
</style>
